<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<table *ngIf="!isLoading" mat-table [dataSource]="data">

  <caption>{{'models.caption' | translate}}</caption>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef scope="col">{{'models.name' | translate}}</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{element.name}}"
        [matTooltipDisabled]="disableToolTip(element.name)">
      {{element.name | truncate:maxElementLength}}
    </td>
  </ng-container>

  <ng-container matColumnDef="apiKey">
    <th mat-header-cell *matHeaderCellDef scope="col">{{'models.api_key' | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.apiKey}}</td>
  </ng-container>

  <ng-container matColumnDef="copyKey">
    <th mat-header-cell *matHeaderCellDef scope="col"></th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button (click)="copyApiKey.emit(element.apiKey)">
        <mat-icon>content_copy</mat-icon>
      </button>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef scope="col"></th>
    <td mat-cell *matCellDef="let element">
      <ng-container *ngIf="userRole !== roleEnum.USER">
        <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="model actions">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="edit.emit(element)">
            <span>{{'models.select_menu.edit' | translate}}</span>
          </button>
          <button mat-menu-item (click)="delete.emit(element)">
            <span>{{'models.select_menu.delete' | translate}}</span>
          </button>
          <button mat-menu-item (click)="test.emit(element)">
            <span>{{'models.select_menu.test' | translate}}</span>
          </button>
        </mat-menu>
      </ng-container>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
